<!--
  @Descripttion：楼层编辑基础表单
  @Author：zqy
  @Date：2022-12-10 15:08:12
  @Last Modified by：zqy
  @Last Modified time：2022-12-14 10:58:45
-->
<template>
  <div>
    <div class="qup-title-box"><span class="border" /><span>基本信息</span></div>
    <el-form ref="refForm" :rules="formRules" :model="formData" :disabled="readonly" size="mini" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="楼层名称:" prop="name">
            <el-input v-model.trim="formData.name" placeholder="请输入楼层名称" maxlength="10" show-word-limit />
          </el-form-item>
          <el-form-item label="楼层布局:">
            <div class="floor-layout">
              <img :src="layoutImage" style="width:177px">
              <div v-if="layoutData.maxCount>0 && !readonly" class="alert-msg">
                最多新增{{ layoutData.maxCount }}条{{ layoutData.type | filterLayoutType }}数据，按序号排序进行显示。
              </div>
            </div>
          </el-form-item>
        </el-col>
        <el-col v-if="layoutData.type==='home_page_fast_entrance'" :span="12">
          <el-form-item label="楼层图标:">
            <div class="img-upload-container">
              <qup-img-uploader
                :width="100"
                :height="100"
                mask
                :image-url="cateImage.absoluteUrl"
                :relative-url="cateImage.relativeUrl"
                @upload-success="handleUploadSuccess"
                @remove="handleDelImg"
              />
              <div class="icon-msg">建议图片尺寸大小80*36,不超过1M,支持png\jpg\jpeg</div>
            </div>
          </el-form-item>
          <el-form-item
            label="是否显示名称:"
            prop="isShowTitle"
            :rules="[
              { required: layoutData.type==='home_page_fast_entrance', message: '请选择', trigger: 'change' }
            ]"
          >
            <el-select v-model="formData.isShowTitle">
              <el-option label="是" :value="1" />
              <el-option label="否" :value="0" />
            </el-select>
          </el-form-item>
        </el-col>
        <template v-if="['define_page_picture','define_page_product'].includes(layoutData.type)">
          <el-col v-if="pageData.type==='product' && layoutData.type==='define_page_product'" :span="12">
            <el-form-item
              label="列表显示:"
              prop="showType"
              :rules="[
                { required: pageData.type==='product' && layoutData.type==='define_page_product', message: '请选择', trigger: 'change' }
              ]"
            >
              <el-select v-model="formData.showType">
                <el-option label="按SPU展示" value="SPU" />
                <el-option label="按SKU展示" value="SKU" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-else :span="12">
            <el-form-item label="是否锚点:" prop="isAnchor">
              <el-select v-model="formData.isAnchor">
                <el-option label="是" :value="1" />
                <el-option label="否" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
        </template>
        <template v-if="layoutData.type==='home_page_fast_entrance'">
          <el-col :span="24">
            <el-form-item
              label="更多链接:"
              prop="gotoDTO"
              :rules="[
                //{ required: layoutData.type==='home_page_fast_entrance', message: '请选择', trigger: 'change' }
              ]"
            >
              <RelateCategory
                ref="formLink"
                v-model="formData.gotoDTO"
                @category-change="handleCategoryChange"
              />
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { FLOOR_TYPE } from '../constData'
import RelateCategory from '@/components/RelateCategoy'
import QupImgUploader from '@/components/imgUploader'
export default {
  name: 'FloorBasicEdit',
  components: { QupImgUploader, RelateCategory },
  filters: {
    filterLayoutType(val) {
      return FLOOR_TYPE[val] || ''
    }
  },
  props: {
    readonly: {
      type: Boolean,
      default: false
    },
    pageData: {
      type: [String, Object],
      default: ''
    },
    floorData: {
      type: [String, Object],
      default: ''
    },
    floorType: {
      type: String,
      default: ''
    }, // 楼层类型 首页-banner：home_page_banner， 首页-导航：home_page_navigation， 首页-快速入口：home_page_fast_entrance， 自定义页面-图片：define_page_picture，自定义页面-商品：define_page_product
    layoutData: {
      type: [String, Object],
      default: ''
    } // 当前所选中的楼层布局
  },
  data() {
    return {
      submiting: false,
      formData: {
        name: '', // 楼层名称
        gotoDTO: {
          gotoType: '', // 关联类型
          categoryDTOList: [], // 类目ID
          filterId: '', // 商品中心类目模板
          gotoValue: '', // 关联内容值 (帮助中心详情ID，自定义页面ID，商品详情ID)
          gotoName: '' // 内容名称(帮助中心详情，自定义页面，商品详情)
        },
        isAnchor: '', // 是否锚点
        showType: '', // 商品楼层显示方式
        isShowTitle: '', // 是否显示楼层名称
        logoPic: ''
      },
      formRules: {
        name: [
          { required: true, message: '请输入楼层名称', trigger: 'change' }
        ]
      },
      cateImage: {
        absoluteUrl: '',
        relativeUrl: ''
      }
    }
  },

  computed: {
    layoutImage() {
      if (this.layoutData && this.layoutData.image) {
        return require('../images/' + this.layoutData.image)
      }
      return ''
    }
  },
  watch: {
    floorData: {
      handler(val, oldVal) {
        this.setFormData(val)
      },
      immediate: true,
      deep: true
    }
  },
  created() {

  },

  methods: {
    filterLayoutType() {

    },
    setFormData(data) {
      this.formData = {
        name: data.name || '', // 楼层名称
        gotoDTO: {
          gotoType: data.gotoType || '',
          categoryDTOList: data.categoryDTOList || [],
          filterId: data.filterId || '',
          gotoValue: data.gotoValue || '',
          gotoName: data.gotoName || ''
        },
        isAnchor: Number(data.isAnchor || 0),
        showType: data.showType,
        isShowTitle: Number(data.isShowTitle || 0),
        logoPic: data.logoPic
      }
      if (data.logoPic) {
        this.cateImage = {
          absoluteUrl: this.formatImageUrl(data.logoPic),
          relativeUrl: data.logoPic
        }
      }
    },
    /**
     * 验证当前表单数据
     * @returns {Boolean} 是否通过验证：true 通过，false 未通过
     * */
    async validateForm() {
      return new Promise((resolve, reject) => {
        this.$refs['refForm'].validate((valid) => {
          if (valid) {
            /* if (this.layoutData.type === 'home_page_fast_entrance') {
              if (this.$refs.formLink) {
                const flag = this.$refs.formLink.validate()
                if (!flag) {
                  this.$message.warning('更多链接必填')
                  return false
                }
              }
            } */
            resolve(this.formData)
          } else {
            reject()
          }
        })
      })
    },

    handleUploadSuccess(res, file, fileList) {
      this.formData.logoPic = res.storeFileName
      this.cateImage = {
        absoluteUrl: res.url,
        relativeUrl: res.storeFileName
      }
    },
    handleDelImg() {
      this.formData.logoPic = ''
      this.cateImage = {
        absoluteUrl: '',
        relativeUrl: ''
      }
    },
    handleCategoryChange(data) {

    }
  }
}
</script>
<style lang='scss' scoped>
  .floor-layout{
      width: fit-content;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      .alert-msg{
        margin-left: 10px;
        color: #999;
      }
  }
  .img-upload-container {
    .icon-msg{
      margin-top: 10px;
      color: #999;
    }
  }
</style>
